<template>
    <div class="AddMatchDetail">
      <div class="AddMatchTop">
        <el-steps :active="step" style="   width: 72%;">
          <el-step title="赛事基本信息" icon="el-icon-edit"></el-step>
          <el-step title="积分及必填信息" icon="el-icon-edit-outline"></el-step>
          <el-step title="完成" icon="el-icon-check"></el-step>
        </el-steps>
        <div>
          <el-button round>查看竞赛规则</el-button>
        </div>
      </div>
      <div class="AddMatchContent">
       <div class="AddMatchInfo" v-show="step==1">
        <MatchBasicInfo/>
       </div>
       <div class="AddMatchImportant" v-show="step==2">
         <MatchImportantInfo/>
       </div>
       <div class="AddMatchCheck" v-show="step==3">
         <MatchBasicInfo/>
        <MatchImportantInfo/>
       </div>
        <div style="justify-content: center;display: flex;margin-top: 30px;margin-bottom: 30px;">
          <el-button round style="width: 200px" type="primary" @click="GoToNext">{{GoNext}}</el-button>
        </div>
      </div>
    </div>
</template>

<script>
  import MatchBasicInfo from './MatchBasicInfo.vue'
  import MatchImportantInfo from './MatchImportantInfo.vue'
  import { mapState } from 'vuex'
    export default {
      name: "AddMatchDetail",
      components: {
        MatchImportantInfo,
        MatchBasicInfo
      },
      data(){
          return{
            GoNext:'下一步'
          }
        },
      watch:{
        step:function (val) {
          if(val==3){
            this.GoNext='是否完成核对'
          }
          else{
            this.GoNext='下一步'
          }
        }
      },
      methods:{
        GoToNext(){
          switch (this.step){
            case 1:
              this.$store.commit('setAddMatchDetailStep',2)
                  break;
            case 2:
                this.$store.commit('setAddMatchDetailStep',3)
                  break;
            case 3:
              this.$store.commit('setAddMatchDetailStep',1)
                  break
          }
          console.log(this.step)
        },
      },
      computed:{
        ...mapState({
          step:'AddMatchDetailStep',
        })
      },
    }
</script>

<style scoped>
.AddMatchDetail{
  width: 90%;
  margin-top: 50px;
  margin-left: 40px;
  /*height: 90%;*/
}
.AddMatchTop{
display: flex;
  justify-content: space-around;
  margin-bottom: 40px;
}
.AddMatchContent{
  height: 100%;
}
.AddMatchInfo{
  height: 80%;
  display: flex;
  flex-direction: column;
}
.AddMatchImportant{
  height: 80%;
  display: flex;
  flex-direction: column;
}
.AddMatchCheck{
  height: 80%;
  display: flex;
  flex-direction: column;
}
</style>
